<template>
  <div class="apply-artist">
    <div class="apply-artist-title">申请成为艺术家</div>
    <div class="apply-artist-form">
      <div class="process">
        <div class="bg">
          <div :class="['second', 'all-center', process > 0 ? 'first' : '']">
            1
          </div>
          <div class="text">输入身份信息</div>
        </div>
        <div class="process-line" />
        <div class="bg">
          <div :class="['second', 'all-center', process > 0 ? 'first' : '']">
            2
          </div>
          <div class="text">作品或推荐人认证</div>
        </div>
        <div class="process-line" />
        <div class="bg">
          <div :class="['second', 'all-center', process > 1 ? 'first' : '']">
            3
          </div>
          <div class="text">完成申请</div>
        </div>
      </div>
      <div class="line" />
      <div v-if="process == 0" class="first-form">
        <div class="form-title">输入身份信息</div>
        <el-form
          :model="identityForm"
          :rules="identityRules"
          ref="identityForm"
        >
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model="identityForm.name"
              placeholder="请输入真实姓名"
            />
          </el-form-item>
          <el-form-item label="选择证件类型" prop="identity_type">
            <el-select
              v-model="identityForm.identity_type"
              placeholder="请选择证件类型"
            >
              <el-option
                v-for="(item, index) in typeOptions"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="`${identityForm.identity_type}号码`"
            prop="identity_num"
          >
            <el-input
              v-model="identityForm.identity_num"
              :placeholder="`请输入${identityForm.identity_type}号码`"
            />
          </el-form-item>
          <el-form-item label="推荐人认证" prop="recomment_num">
            <el-input
              v-model="identityForm.recomment_num"
              placeholder="请输入推荐人"
            />
          </el-form-item>
          <el-form-item label="专长类型">
            <el-radio-group v-model="identityForm.type">
              <el-radio
                v-for="item in typeList"
                :label="item.data_id"
                :key="item.data_id"
                >{{ item.name }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-row class="code-box">
            <el-col :span="12">
              <el-form-item label="验证码" prop="vcode">
                <el-input
                  v-model="identityForm.vcode"
                  :placeholder="`请输入验证码`"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10" class="clearfix">
              <img class="wrap-code-img" :src="codeImg" alt="" />
            </el-col>
            <el-col :span="2">
              <img
                class="wrap-refre-code"
                @click="referCode"
                src="@/static/img/applyArtist/icon_shuaxin.png"
                alt=""
              />
            </el-col>
          </el-row>
        </el-form>
        <div class="agreement">
          <el-checkbox v-model="checked"></el-checkbox>
          我已阅读并同意
          <span class="user" @click="goAgreement">用户协议</span>
          和
          <span class="policy" @click="goPolicy">隐私政策</span>
        </div>
      </div>
      <div v-if="process == 1" class="second-form">
        <div class="form-title">输入身份信息</div>
        <el-form :model="authForm" :rules="authRules" ref="authForm">
          <el-form-item
            label="上传认证作品"
            prop="filename"
            class="upload-works"
          >
            <uploadImg
              @setCardPic="setCardPic($event, 'imgPath')"
              @change="authForm.filename = $event.name"
              ref="imgPath"
              type="image"
              api="uploadArtApply"
              :params="imgParams"
            />
          </el-form-item>
        </el-form>
      </div>
      <div v-if="process == 2" class="three-form">
        <div class="three-form-title">申请已提交</div>
        <div class="desc">认证结果将在 24h 内以消息形式通知您。</div>
      </div>
      <div class="line" />
      <div v-if="process == 2" @click="goHome" class="result-btn all-center">
        知道了
      </div>
      <div class="btn-box">
        <div
          v-show="process > 0 && process < 2"
          :class="['pev', 'all-center', process == 1 ? 'second-form-btn' : '']"
          @click="pev"
        >
          上一步
        </div>
        <div
          v-show="process != 2"
          class="next all-center"
          @click="next(process === 0 ? 'identityForm' : 'authForm')"
        >
          下一步
        </div>
      </div>
      <div class="describe" v-if="process == 0">
        信息将用于身份验证，艺览天下之海淀会尽全力保障您的隐私安全。
      </div>
      <div class="describe" v-if="process == 1">
        作品将用于身份验证，不会对外公布。
      </div>
    </div>
  </div>
</template>

<script>
import { guid } from "@/utils/validate";
export default {
  // middleware: 'isArt',
  scrollToTop: true,
  name: "",
  components: {},
  props: {},
  data() {
    const checkIDCard = (rule, value, callback) => {
      let num = value.toUpperCase() || "";
      // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X。
      let reg = /^(\d{18,18}|\d{15,15}|\d{17,17}X)$/;
      if (!reg.test(num)) {
        callback(new Error("身份证格式不正确！"));
      }
      // 校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10。
      // 下面分别分析出生日期和校验位
      let len, re;
      len = num?.length;
      if (len == 15) {
        re = new RegExp(/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/);
        let arrSplit = num.match(re) || [];
        // 检查生日日期是否正确
        let dtmBirth = new Date(
          "19" + arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]
        );
        let bGoodDay;
        bGoodDay =
          dtmBirth.getYear() == Number(arrSplit[2]) &&
          dtmBirth.getMonth() + 1 == Number(arrSplit[3]) &&
          dtmBirth.getDate() == Number(arrSplit[4]);
        if (!bGoodDay) {
          callback(new Error("身份证格式不正确！"));
        }
      }
      if (len == 18) {
        re = new RegExp(/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/);
        let arrSplit = num.match(re) || [];
        // 检查生日日期是否正确
        let dtmBirth = new Date(
          arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]
        );
        let bGoodDay;
        bGoodDay =
          dtmBirth.getFullYear() == Number(arrSplit[2]) &&
          dtmBirth.getMonth() + 1 == Number(arrSplit[3]) &&
          dtmBirth.getDate() == Number(arrSplit[4]);
        if (!bGoodDay) {
          callback(new Error("身份证格式不正确！"));
        } else {
          let valnum;
          let arrInt = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
          let arrCh = ["1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2"];
          let nTemp = 0,
            i;
          for (let i = 0; i < 17; i++) {
            nTemp += num.substr(i, 1) * arrInt[i];
          }
          valnum = arrCh[nTemp % 11];
          if (valnum != num.substr(17, 1)) {
            callback(new Error("身份证格式不正确！"));
          }
        }
      }
      callback();
    };

    return {
      codeImg: "",
      uid: "",
      process: 0,
      typeList: [],
      typeOptions: [
        "身份证",
        "港澳通行证",
        "台湾通行证",
        "港澳居住证",
        "台湾居住证",
      ],
      identityForm: {
        name: "",
        identity_type: "身份证",
        identity_num: "130425200103044212",
        vcode: "",
        recomment_num: "",
        type: [],
        identity_work: "",
      },
      checked: false,
      identityRules: {
        name: [
          {
            required: true,
            message: "请填写真实姓名",
            trigger: "blur",
          },
        ],
        identity_type: [
          {
            required: true,
            message: "请选择证件类型",
            trigger: "change",
          },
        ],
        identity_num: [
          {
            required: true,
            trigger: "blur",
            validator: checkIDCard,
          },
        ],
        vcode: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
      },
      authForm: {
        filename: "",
      },
      authRules: {
        filename: [
          {
            required: true,
            message: "请上传作品",
            trigger: "blur",
          },
        ],
      },
      imgParams: {
        op: "upload_file",
        name: "identify_work",
        data_id: "",
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  async mounted() {
    this.getCode();
    this.getProductType();
  },
  async asyncData({ $api }) {},
  methods: {
    goHome() {
      this.$router.push("/home");
    },
    async getProductType() {
      const res = await this.$api.getProductType({});
      if (res.status == "$SUCCESS") {
        this.typeList = res.result.item_list.filter(
          (item) => item.parent_id == -1
        );
        // this.handleMenu(res.result.item_list[0], 0)
      }
    },
    getCode() {
      this.uid = guid();
      this.codeImg = `${process.env.NUXT_API_URL}/plat_service/v1/api/captcha?uid=${this.uid}&ak=${this.$store.state.user.info?.ak}`;
    },
    referCode() {
      this.getCode();
    },
    /*执行uploadImg组件报出来的事件，path就是显示图片的路径*/
    setCardPic(path, pic) {
      // this.form[pic] = path
      // this.authForm.picPath = path
      this.identityForm.identity_work = path;
    },
    // 跳转到协议页
    goAgreement() {
      this.$Navigation.to({ path: "/policy/agreement" });
    },
    // 跳转到隐私页
    goPolicy() {
      this.$Navigation.to({ path: "/policy/policy" });
    },
    next(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.checked) {
            if (this.process == 0) {
              this.$api
                .artApply({ ...this.identityForm, uid: this.uid }, {})
                .then((res) => {
                  if (res.status == "$SUCCESS") {
                    this.process++;
                    this.imgParams.data_id = res.result;
                  }
                });
              // this.clearForm()
            } else if (this.process == 1) {
              this.process++;
            }
          } else {
            this.$message.warning("请先阅读用户协议和隐私政策");
          }
        }
      });
    },
    pev() {
      if (this.process >= 0) {
        this.process--;
        // this.clearForm()
      } else {
      }
    },
    clearForm() {
      this.$refs.identityForm?.resetFields();
      this.$refs.authForm?.resetFields();
      this.identityForm.identity_type = "身份证";
    },
  },
};
</script>

<style scoped lang="less">
.apply-artist {
  padding: 60px 276px 120px;

  ::v-deep(.el-input__inner) {
    background-color: #f3f4f4;
    border-radius: 0;
  }

  ::v-deep(input::-webkit-input-placeholder) {
    color: #999;
  }

  .apply-artist-title {
    line-height: 30px;
    font-size: 30px;
    font-weight: 600;
    color: #000;
    line-height: 30px;
    margin-bottom: 40px;
  }

  .apply-artist-form {
    background: #fff;
    padding: 50px 210px 60px;
    position: relative;

    .process {
      text-align: center;

      .bg {
        width: 130px;
        display: inline-block;
      }

      .second {
        width: 40px;
        height: 40px;
        background: #eee;
        border-radius: 50%;
        font-size: 20px;
        font-weight: 600;
        color: #333;
      }

      .first {
        width: 40px;
        height: 40px;
        background: #e0cbb4;
        border-radius: 50%;
        font-size: 20px;
        font-weight: 600;
        color: #333;
      }

      .text {
        font-size: 14px;
        font-weight: 600;
        color: #333;
      }

      .process-line {
        height: 2px;
        width: 244px;
        display: inline-block;
        background: linear-gradient(
          to left,
          transparent 0%,
          transparent 50%,
          #e0cbb4 50%,
          #e0cbb4 100%
        );
        background-size: 10px 1px;
        background-repeat: repeat-x;
        margin-bottom: 35px;
      }
    }

    .line {
      height: 1px;
      width: 100%;
      background: #e8e8e8;
      margin: 45px 0 60px;
    }

    // 相同的样式这个页面有两个地方要用 所以没有用命名空间区分
    .form-title {
      line-height: 24px;
      font-size: 24px;
      font-weight: 600;
      color: #333;
      margin-bottom: 40px;
    }

    .first-form {
      padding-right: 368px;

      .code-box {
        position: relative;
      }

      .wrap-code-img {
        width: 11.354167vw;
        height: 2.083333vw;
        position: absolute;
        bottom: 22px;
        right: 25px;
      }

      .wrap-refre-code {
        position: absolute;
        bottom: 30px;
        right: 0;
        cursor: pointer;
      }

      .agreement {
        // text-align: center;
        font-size: 16px;
        color: #000;

        .user,
        .policy {
          color: #aa9884;
          cursor: pointer;
        }
      }

      ::v-deep(.el-select) {
        width: 100%;
      }
    }

    .second-form {
      .upload-works {
        ::v-deep(.el-form-item__label) {
          float: none;
        }
      }
    }

    .three-form {
      padding: 100px 0;
      text-align: center;

      .three-form-title {
        font-size: 24px;
        font-weight: 600;
        color: #333;
        margin-bottom: 40px;
      }

      .desc {
        font-size: 16px;
        font-weight: 400;
        color: #333333;
      }
    }

    .result-btn {
      width: 220px;
      height: 48px;
      background: #e0cbb4;
      font-size: 16px;
      color: #333;
      margin: 0 auto;
      display: flex;
      cursor: pointer;
    }

    .btn-box {
      text-align: center;
      margin-bottom: 23px;

      .pev,
      .next {
        width: 220px;
        height: 48px;
        font-size: 16px;
        color: #333;
        cursor: pointer;
      }

      .pev {
        border: 1px solid #ccc;
        box-sizing: border-box;
        margin-right: 40px;

        &.second-form-btn {
          background: #e0cbb4;
        }
      }

      .next {
        background: #e0cbb4;
      }
    }

    .describe {
      font-size: 16px;
      color: #999;
      text-align: center;
    }
  }
}
</style>
